<template>
  <PageListContainer>
    <BreadCrumb>
      <template #default>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>考古加讲师数据</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'AgencyKgjLecturerLecturerList' }">讲师发放管理</el-breadcrumb-item>
          <el-breadcrumb-item>佣金列表</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
    </BreadCrumb>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="账号搜索">
          <el-input
            v-model="state.params.keyword"
            clearable
            placeholder="请输入账号名、手机号"
          />
        </el-form-item>
        <el-form-item label="续费时间" label-width="100px">
          <el-date-picker
            v-model="state.params._dateRange"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYYMMDD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <KTable v-loading="state.loading" v-bind="tableState" v-on="tableEvent">
      </KTable>
    </div>
  </PageListContainer>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { useTableList, timeChange } from './hooks/use-table';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';

defineOptions({ name: 'AgencyKgjLecturerCommissionList' });
const route = useRoute();
const agent_id = route.params.agent_id;
const { state, tableState, tableEvent, ...methods } = useTableList({
  getParams: (params: Record<string, any>) => {
    const cacheParams = { ...params, _dateRange: undefined };
    const { _dateRange } = params;
    const { from, to } = timeChange(_dateRange);
    return {
      ...cacheParams,
      from_dt: from,
      to_dt: to,
      agent_id
    };
  }
});
</script>
